<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <!-- 个人数据内容 -->
    <div class="main">
      <!-- 头部区域 -->
      <a href="./mine-edit.html" class="header-container">
        <!-- 头像和用户名 -->
        <div class="header">
          <div class="header-box">
            <img id="userImg" class="header-img" src="../src/images/user-img.jpg" alt="头像">
            <span id="nickName" class="header-name">--</span>
          </div>
          <span class="iconfont icon-jiantou4 mine-arrow"></span><!-- 向右箭头 -->
        </div>

        <!-- 个性签名 -->
        <p class="header-sign">个性签名：<span id="userSign">这个人很懒，什么都没有留下</span></p>
      </a>
      <!-- 文件上传的 input -->
      <input type="file" id="imgUploadIpt" class="dpnone">

      <!-- 个人动态 -->
      <div class="dynamic-container">
        <div>
          <span class="iconfont icon-dongtai-yonghugushi mine-icon"></span>
          <span class="mine-card-title">个人动态</span>
        </div>
        <div>
          <span id="dynamicCount" class="dynamic-count">--</span>
          <span class="iconfont icon-jiantou4 mine-arrow"></span>
        </div>
      </div>

      <!-- 运动数据 -->
      <div class="data-container" id="sportsData">
        <div class="data-header">
          <div>
            <span class="iconfont icon-shuju mine-icon"></span>
            <span class="mine-card-title">运动数据</span>
          </div>
          <span class="iconfont icon-jiantou4 mine-arrow"></span>
        </div>

        <div class="dpflex">
          <div class="data-time">
            <p class="card-subtitle">总运动</p>
            <p><span id="timeCount" class="card-num">--</span><span class="fs12">分钟</span></p>
          </div>
          <div class="flex1 pl8">
            <p class="card-subtitle">本周消耗</p>
            <p><span id="kcalCount" class="card-num">--</span><span class="fs12">千卡</span></p>
          </div>
        </div>
      </div>

      <!-- 运动徽章 -->
      <div class="badge-container">
        <div class="badge-header" id="mybadge">
          <div>
            <span class="iconfont icon-huizhang mine-icon"></span>
            <span class="mine-card-title">运动徽章</span>
          </div>
          <span class="iconfont icon-jiantou4 mine-arrow"></span>
        </div>
        <div class="badge-list" id="badgeList"></div>
      </div>

      <div id="logout">退出登录</div>
    </div>

    <!-- tab栏 -->
    <div class="foot"></div>
  </div>
</body>

</html>